<template>
    <div class="alterAddress">
        <!-- 修改昵称 -->
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
            <span class="iconfont icon-fanhui header_fanhui" @tap="gtolast()"></span>
            <!--标题-->
            <h1 class="mui-title">修改地址</h1>
            <span  class="mui-pull-right Tit" @tap="sendName">确认</span>
        </header>
        <!-- <div class="alterNameNeir">
            <div class="line"></div>
            <mt-field placeholder="请填写您要修改昵称" style="top:44px;" v-model="userInfo.name"></mt-field>
            <div class="line"></div>
        </div> -->
        <ul class="mui-table-view mui-table-view-chevron clause">
          <li  class="mui-table-view-cell" @tap="showCityPickerButton">
            <a class="mui-navigate-right">
              <span class="usertit">所在地区</span> 
              <span style="padding-left:10px" v-if="userInfo.area">{{userInfo.area}}</span>
              <span v-else class="userpams">请选择</span>
            </a>
          </li>
          <li >
            <div  class="mui-input-row">
              <label  style="padding:0px;margin-left:15px;margin-top:10px;width:64px;">详细地址</label> 
              <textarea   v-model="userInfo.address"  maxlength="50" name ="address" type="text" placeholder="请输入详细地址信息，如道路，门牌号，小区，楼栋号，单元室等(不能超过50字符)" class="mui-input-clear" style="padding: 8px 15px 10px; font-size: 0.7rem;">
              </textarea>
              <span v-show="validated_status.address" style="position:absolute;right:0px;top:30px;" class="mint-field-state is-error">
                <i class="mintui mintui-field-error"></i>
              </span>
            </div>
          </li>
        </ul>
    </div>
</template>

<script>
    import mui from 'static/js/mui'
    import {updateCustomerMessage} from '@/api/user'
    import storage from "@/utils/localstorage"
    import { Toast } from 'mint-ui'
    import 'static/js/mui.picker.js'
    import 'static/js/mui.poppicker.js'
    import 'static/js/mui.dtpicker.js'
    //prevent用来阻止原生事件，去掉会有惊喜！
    export default {

        data() {
            return {
              userInfo:{},
              validated_status: {
                'name': null,
                'mobile': null,
                'idCard':'',
                'address':null,
              }
            }
        },
        props: {},
        watch: {},
        methods: {
           //返回上一层
            gtolast(){
              // this.sendName()
              this.$router.push('/userMsg');//返回上一层
            },
            sendName(){
                updateCustomerMessage(this.userInfo).then(response => {
                    storage.setLocalstorage('user',response.data)
                    this.$store.commit('SET_USER',response.data)
                    Toast('保存成功')
                    this.$router.push({
                        name:'userMsg',
                    })
                })
            },
            showCityPickerButton() {
              let that = this
              this.cityPicker3.show(function(items) {
                that.userInfo.area = (items[0] || {}).text + (items[1] || {}).text + (items[2] || {}).text;
              });
            },
            showDtpicker() {
              let that = this;
              this.dtpicker.show(function(items) {
                that.birthData =
                  items.y.text + "年" + items.m.text + "月" + items.d.text + "日";
                //console.log(that.birthData);
              });
            }
        },
        filters: {},
        computed: {},
        created() { 
            this.userInfo = storage.getLocalstorage('user')
        },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            //地址
            this.cityPicker3 = new mui.PopPicker({
              layer: 3
            });
            this.cityPicker3.setData(this.$store.state.appData.cityData3);

            // 日期
            this.dtpicker = new mui.DtPicker(this.data_options);
         }
    }

</script>

<style lang="scss">
    .Tit{
        line-height: 43px;
        font-size: 0.7rem;
        color:#666666;
    }
    .noMoreMsg{
        text-align:center;color:#AEAEAE;
        padding:15px;font-size:0.7rem;
    }
    .bg-color{
        -webkit-box-shadow: 0 0px 0px !important;
        box-shadow: 0 0px 0px !important;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
    p{
      color:#333333!important;
      margin-bottom:4px;
    }
    .mint-cell-value .mint-field-core {
        line-height: 21px;
        width: 100%;
        height: 40px;
        margin-bottom: 0px;
        padding: 10px 15px;
        -webkit-user-select: text;
        border: none
    }
    .mint-cell-wrapper {
        background-image: none;
        background-image: none;
    }
    .line {
        width: 100%;
        padding: 5px 0px 5px 0px;
        background-color: #f5f5f5;
    }
    .alterAddress{
      margin-top:44px;
    }
  .mui-input-row label ~ textarea{
    float: right;
    width: 80%;
    height: 100px;
    margin-bottom: 0;
    padding-left: 0;
    border: 0;
  }
</style>